<template>
	<view class="dynamic-form">
		<!--  可配置区域 -->
		<view class="dynamic-form-data">
			<view v-for="(field, index) in feildData" :key="index" class="dynamic-form-item">
				<view class="dynamic-form-item__row">
					<view class="dynamic-form-item__label">
						<uni-text>{{ field.label }}</uni-text>
						<uni-text v-if="field.required" class="required">*</uni-text>
					</view>
					<view class="dynamic-form-item__desc">
						<DynamicField
							:fieldKey="field.key"
							:formData="formData"
							:field="field"
							:isEdit="isEdit"
							@update-form-data="updateFormData" 
						/>
					</view>	
				</view>
				<view v-if="errors[field.key]" class="dynamic-form-item__error">
					<text class="error" >{{ errors[field.key] }}</text>
				</view>
			</view>	
		</view>

		<!-- 底部操作按钮 -->
		<view class="flex flex-wrap diygw-col-24 flex-direction-column diygw-bottom">
			<view class="flex diygw-col-24">
				<button style="color: #fbf7f7 !important" @tap="navigateTo" data-type="page" data-url="/pages/index"
					class="diygw-btn gradual-blue radius-xl flex-sub margin-xs button-button-clz">
					取消
				</button>
				<button @click="onSave"
					class="diygw-btn cyan radius-xl flex-sub margin-xs button-button-clz"> 
					{{ formData.id ? '保存' : '创建' }}
				</button>
			</view>
		</view>
  </view>
</template>

<script>
import DynamicField from '@/components/fields/DynamicField.vue';	
import feildData from '@/common/data/active/activeFeildData.js';
	import dataDictionary from '@/common/data/dataDictionary.js';
export default {
  data() {
    return {
	  formData:{},
	  updateFlag:false,
	  feildData:feildData,
	  isEdit:true,
	  dataDictionary: dataDictionary.active, //数据字典
    };
  },
  components: {
  	DynamicField,
  },
  onLoad(options) {
    const orderId = options.id;
	if(options && options.formData){
		console.log("========options.formData:"+options.formData)
		this.formData = JSON.parse(options.formData);
		this.updateFlag = true;
	}
	
	if (this.feildData) {
		for (let i = 0; i < this.feildData.length; i++) {
			let obj = this.feildData[i];
			if (this.dataDictionary[obj.key]) {
				obj.options = this.dataDictionary[obj.key];
			}
		}
	}
  },
  methods: {
	  
	  updateFormData(key, newFormData) {
	  	if(this.formData[key] == newFormData[key]){
	  		return;
	  	}
	  	console.log("修改前的值======" + key + ":", this.formData[key])
	  	this.formData = newFormData; // 更新父组件的值
	  	console.log("修改后的值======" + key + ":", this.formData[key])
	  
	  	if (!this.feildData) {
	  		return;
	  	}
	  	for (let i = 0; i < this.feildData.length; i++) {
	  		let obj = this.feildData[i];
	  		if (!obj.relations || !obj.relations[key]) {
	  			continue;
	  		}
	  		if (!obj.relations[key].includes(this.formData[key])) {
	  			obj.isShow = false;
	  		} else {
	  			obj.isShow = true;
	  		}
	  	}
	  },
	  
	// 保存
	async onSave() {
		// this.validateName();
		// this.validateStock();
	
	// 	if (this.errors.name || this.errors.stock) {
	// 		uni.showToast({
	// 			title: "请检查表单内容",
	// 			icon: "none",
	// 		});
	// 		return;
	// 	}
	
		// let goods = uni.getStorageSync('goods') || [];
	
		// if (!this.formData.id) {
		// 	this.formData.id = goods.length + 1
		// 	goods.push(this.formData);
		// } else {
		// 	goods[this.formData.id - 1] = this.formData;
		// }
	
		// uni.setStorageSync('goods', goods);
		// uni.showToast({
		// 	title: "保存成功",
		// 	icon: "success",
		// });
		// uni.navigateBack();
		// if (this.formData.buyAt) {
		// 	this.formData.buyAt = formatTime(this.formData.buyAt);
		// }
		// if (this.formData.arrivalAt) {
		// 	this.formData.buyAt = formatTime(this.formData.arrivalAt);
		// }
		if (!this.formData.id) {
			this.formData.createdAt = new Date();
		}
		this.formData.updatedAt = new Date();
		this.$api.storeActiveSave(this.formData).then(result => {
			// 成功处理
			uni.showToast({
				title: "保存成功",
				duration: 3000
			});
		}).catch(res => {
			// 失败进行的操作
			uni.showToast({
				title: "保存失败!",
				duration: 3000
			});
			return;
		})
	},
	
	// 取消
	onCancel() {
	  uni.navigateBack();
	},
	
  }
};
</script>


<style lang="less" scoped>
	@import url("@/common/css/dynamic-form.less");
</style>